<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Merge Geometries Test</title>
    <meta name="description" content="Merge Geometry - A-Frame">
    <script src="../../../dist/aframe.js"></script>
    <style>
      body { background-color: black; }
    </style>
  </head>
  <body>
    <div class="stats"></div>
    <a-scene stats>
      <a-assets>
        <a-mixin id="cube"
                 geometry="primitive: box; height: 16; width: 16; depth: 16; mergeTo: #boxes; skipCache: true; buffer: false;"
                 material="color: #167341; roughness: 1.0; metalness: 0.2;"></a-mixin>
      </a-assets>
      <a-entity position="0 20 0">
        <a-entity camera wasd-controls look-controls></a-entity>
      </a-entity>
      <a-entity id="boxes" material="color: #167341; roughness: 1.0; metalness: 0.2;"></a-entity>
    </a-scene>
    <script>
      var cubeEl;
      var sceneEl = document.querySelector('a-scene');
      var xStartPos = -90
      var zStartPos = -10;
      var xPos;
      var zPos;
      var xMargin = 20;
      var zMargin = -20;
      var cubesNum = 200;
      var rootEl;
      var x;
      zPos = zStartPos;
      for (var i = 0; i < cubesNum; i += 1) {
        xPos = xStartPos;
        for (var j = 0; j < 10; j += 1) {
          cubeEl = document.createElement('a-entity');
          cubeEl.setAttribute('mixin', 'cube');
          cubeEl.setAttribute('position', { x: xPos, y: 0, z: zPos});
          xPos += xMargin;
          sceneEl.appendChild(cubeEl);
        }
        zPos += zMargin;
      }
    </script>
  </body>
</html>
